<template>
  <div class="zuReportcharts">
    <h2>今日进入客流排行</h2>
    <div class="echardiv"
     v-loading="loading"
    element-loading-text="拼命加载中..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(255, 255,255, 0.8)">
      <div class="repData" id="compDistriEcharts"></div>
    </div>
  </div>
</template>

<script>
  let moment = require("moment");
  let echarts = require("echarts");
  export default {
    props:{
      tags:{
        default: function() {
          return 1
        }
      },
      compId:{
        default:function(){
          return ''
        }
      }
    },
    data() {
      return {
        defaultEcharts:{            //默认样式与无数据图片
          title:{
            show:true,
            text:"暂 无 数 据",
            textAlign:'center',
            left:'48%',
            top:'45%',
            textStyle:{
              fontSize:16,
              color:'#b4b6bd',
            }
          },
          grid: {
            x: 70,
            x2: "8%"
          },
          backgroundColor:{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#f5f8fe' // 0% 处的颜色
            }
            ],
            global: false // 缺省为 false
          },

          series: []
        },
        myChart: null,
        loading:false,
      }
    },
    mounted(){
      
      //点击收缩按钮
      this.$Bus.$on("ArrowClick", w => {
        this.loadEchartResize(w);
      });
      this.myChart = echarts.init(document.getElementById('compDistriEcharts'));
      this.loadEchart(this.defaultEcharts);
      setTimeout(() => {
        this.loadEchartResize("");
      }, 200);
    },
    beforeDestroy(){
      this.$Bus.$off('ArrowClick');
    },
    methods:{
      
      getData(id){
        this.loading=true;
        let start_day,end_day,start_hm,end_hm;
        start_day=end_day=moment(new Date()).format("YYYY-MM-DD");
        start_hm='00:00';
        end_hm=moment(new Date()).format("HH:mm");
        let url="/sys/report_new/distribution_sum?group_type=case&tags="+this.tags+'&indicator_keys='+['enters']+'&sort_key=enters&sort_type=desc'+'&start_day='+start_day+'&end_day='+end_day+'&start_hm='+start_hm+'&end_hm='+end_hm;
        let params={
          org_id_list:Array.of(id),
          org_type:1
        };
        this.$api.post(url,params)
        .then(data=>{
          if(data == '10001'){
              this.$message.error('无权操作该数据');
              this.loadEchart(this.defaultEcharts);
              return
          }
          if(data.data.item_list && data.data.item_list.length)
          {
            let x_data=[];
            let y_data=[];
            for(let i=0;i<data.data.item_list.length;i++)
            {
                y_data.push(data.data.item_list[i].enters);
                x_data.push(data.data.item_list[i].case_info_name);
            };
            let Data={
              yData:y_data,
              xData:x_data,
            };
            this.UpData(Data);
          }
          else{
            this.UpData(false);
          }
        })
        .catch(err=>{
           console.log(err);
        })
      },
      UpData(Data){
        if(Data==false || Data.yData.length==0){
          this.loadEchart(this.defaultEcharts);
          return ;
        }
        let option={};
        option.legend={
          type: 'scroll',
          orient: "horizontal",
          width:'70%',
          top: "15",
          left:'center',
          itemGap: 20,
        };
        let max=1;
        for(let i=0;i<Data.yData.length;i++)
        {
          max=max<Data.yData[i]?Data.yData[i]:max;
        }
        max=max.toString().length;
        option.grid={
          left:max>3?(max*10)+5:40,
          right:(max*10)+35,
          top:60,
          bottom:90,
        };
        option.tooltip={
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          },
          
        };
        option.color= ['#2c69f3'];
        option.nameLocation="center";
        option.xAxis=[
          {
            type: "category",
            gridIndex: 0,
            data:Data.xData,
            align: "center",
            axisLabel:{
              padding:[0,0,0,0],
              show: true,
              rotate: 30,
            }
          },
        ];
        option.yAxis=[
          {
            type: "value",
            name:'客流/人',
            position: 'left',
            axisLine: {
                show: false
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(33,148,246,0.2)'
                }
            },
            axisTick: {
              show:false
            },
          }
        ];
        option.series=[
          {
            name:'进入人数',
            type:'bar',
            data:Data.yData,
            barMaxWidth: '20px',
            
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#587bff' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#022397' // 100% 处的颜色
                    }], false),
                    barBorderRadius: [30, 30, 0, 0],
                }
            },
            smooth:true,
            markPoint: {
              
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            },
           
          }
        ];
        this.loadEchart(option);
      },
      loadEchart(option) {
        this.myChart.setOption(option, true);
        this.$nextTick(()=>{
          this.loading=false;
        })
      },
      loadEchartResize(w) {
        let opts;
        if (this.isEmpty(w)) opts = { width: w+110 };
        else {
          let con_w = $(".echardiv").width();
          opts = { width: con_w };
        }
        this.myChart.resize(opts);
      },
      isEmpty(obj) {
        if (typeof obj == "undefined" || obj == null || obj == "") {
          return false;
        } else {
          return true;
        }
      },
    },
    watch:{
      compId(newVal,oldVal){
        if(newVal)
        {
            this.getData(newVal);
        }
        else{
          this.UpData(false);
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .zuReportcharts{
    width: 100%;
    height:100%;
    background: #fff;
    padding: 25px 30px 20px 30px;
    overflow: hidden;
    > h2 {
      line-height: 1;
      font-weight: 600;
      font-size: 17px;
      letter-spacing: 1px;
      display: inline-block;
    }
    .echardiv{
      width: 100%;
      height: 90%;
      margin-top: 20px;
      .repData {
        width: 100%;
        height: 100%;
      }
    }

  }

</style>